<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            color: yellowgreen;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div class="box">段落<span>内容<span></div>
    <div class="box">段落内容</div>
    <div class="box">段落内容</div>
    <img src="touxiang.webp">
</body>
<script>
    var box = document.getElementsByClassName('box')[0];
    var box1 = document.getElementsByClassName('box')[1];
    var box2 = document.getElementsByClassName('box')[2];
    var img = document.getElementsByTagName('img')[0];

    //这种当时添加的就是行内样式, 就是给元素添加style属性,值为color='pink'
    box.style.color = 'pink';
    //想要以以下方式获取元素的样式属性,只能获取行内样式(内联样式)
    console.log(box.style.color);

    box1.className = 'd1';//此时可以给.d1设置样式
    console.log(box1.className);

    img.title = '头像';
    console.log(img.title);

    var img1 = img.getAttribute('src');//获取src属性值
    console.log(img1);
    console.log(img.src);//获取图片所在的地址

    //添加属性值
    img.className = 'aaa';//只能添加固有属性
    img.setAttribute('abc', 'bbb');//可以添加自定义属性

    // 移除属性 removeAttribute(属性)    
    img.removeAttribute('class');

</script>

</html>